import React, { Component } from "react";
import {
    Layout, Menu, Icon, Table, Divider, Button, Modal, Form, Input, DatePicker, Upload,
    Select, Popconfirm, message, Alert, TreeSelect, TimePicker, Tree,
    AutoComplete, Tabs, Col, Row, Dropdown, Card, Pagination, Spin, Skeleton,
    Drawer, Tag, Tooltip, Badge, Radio, Steps, Transfer, notification, Empty, Calendar, Checkbox, Switch
} from "antd";
import { loginApi, getPublickeyApi } from "../js/api.js";
// import reqwest from 'reqwest';


const FormItem = Form.Item;
class WeekRecipesComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible1: false,
            visible2: false,
            visible3: false,
            recipes: '',
            fileList: [],
            uploading: false,

        };
    }
    componentWillMount() {

    }
    componentDidMount() {

    }

    showDrawer1 = () => {
        this.setState({
            visible1: true,
        })
    }
    onClose1 = () => {
        this.setState({
            visible1: false,
        })
    }
    showDrawer2 = () => {
        this.setState({
            visible2: true,
        })
    }
    onClose2 = () => {
        this.setState({
            visible2: false,
        })
    }
    onClose3 = () => {
        this.setState({
            visible3: false,
        })
    }
    handleChange = (value) => {
        console.log("value", value)
    }
    editRecipes = (recipes, record, time) => {
        console.log(time)
        console.log(record.time)
        if (recipes == '+') {
            this.setState({
                recipes: '',
                visible3: true
            })
        } else {
            this.setState({
                recipes: recipes,
                visible3: true
            })
        }
    }
    handleUpload = () => {
        const { fileList } = this.state;
        const formData = new FormData();
        fileList.forEach(file => {
            formData.append('files[]', file);
        });

        this.setState({
            uploading: true,
        });
    };
    handleValue = (recipes) => {
        this.setState({
            recipes: recipes
        })
    }

    setInputValue = (event) => {
        console.log(event)
        this.setState({
            recipes: event.target.value
        })
    }
    onChange = (e) => {

    }

    render() {
        const columns = [
            {
                title: '时段',
                dataIndex: 'time',
                key: 'time',
                className:'tablecss',
                width: 100,
            },
            {
                title: '星期一',
                dataIndex: 'one',
                key: 'one',
                className:'tablecss',
                render: (text, record, index) => {
                    let recipes = text[0];
                    for (let i = 1; i < text.length; i++) {
                        recipes = recipes + text[i];
                    }
                    return <a onClick={this.editRecipes.bind(this, recipes, record, '星期一')} style={{color:'black'}}>{text}</a>
                },
                width: 150,
            },
            {
                title: '星期二',
                dataIndex: 'two',
                key: 'two',
                className:'tablecss',
                render: (text, record, index) => {
                    let recipes = text[0];
                    for (let i = 1; i < text.length; i++) {
                        recipes = recipes + text[i];
                    }
                    return <a onClick={this.editRecipes.bind(this, recipes, record, '星期二')} style={{color:'black'}}>{text}</a>
                },
                width: 150,
            },
            {
                title: '星期三',
                dataIndex: 'three',
                key: 'three',
                className:'tablecss',
                render: (text, record, index) => {
                    let recipes = text[0];
                    for (let i = 1; i < text.length; i++) {
                        recipes = recipes + text[i];
                    }
                    return <a onClick={this.editRecipes.bind(this, recipes, record,  '星期三')} style={{color:'black'}}>{text}</a>
                },
                width: 150,
            },
            {
                title: '星期四',
                dataIndex: 'four',
                key: 'four',
                className:'tablecss',
                render: (text, record, index) => {
                    let recipes = text[0];
                    for (let i = 1; i < text.length; i++) {
                        recipes = recipes + text[i];
                    }
                    return <a onClick={this.editRecipes.bind(this, recipes, record, '星期四')} style={{color:'black'}}>{text}</a>
                },
                width: 150,
            },
            {
                title: '星期五',
                dataIndex: 'five',
                key: 'five',
                className:'tablecss',
                render: (text, record, index) => {
                    let recipes = text[0];
                    for (let i = 1; i < text.length; i++) {
                        recipes = recipes + text[i];
                    }
                    return <a onClick={this.editRecipes.bind(this, recipes, record, '星期五')} style={{color:'black'}}>{text}</a>
                },
                width: 150,
            },
            {
                title: '星期六',
                dataIndex: 'six',
                key: 'six',
                className:'tablecss',
                render: (text, record, index) => {
                    let recipes = text[0];
                    for (let i = 1; i < text.length; i++) {
                        recipes = recipes + text[i];
                    }
                    return <a onClick={this.editRecipes.bind(this, recipes, record, '星期六')} style={{color:'black'}}>{text}</a>
                },
                width: 150,
            },
            {
                title: '星期天',
                dataIndex: 'seven',
                key: 'seven',
                className:'tablecss',
                render: (text, record, index) => {
                    let recipes = text[0];
                    for (let i = 1; i < text.length; i++) {
                        recipes = recipes + text[i];
                    }
                    return <a onClick={this.editRecipes.bind(this, recipes, record, '星期天')} style={{color:'black'}}>{text}</a>
                },
                width: 150,
            },
        ];

        const data = [
            {
                key: '1',
                time: '早餐',
                one: '鲜奶+早餐饼干+菜园小饼1',
                two: '牛奶+小熊饼干+酥饼',
                three: '鲜奶+旺仔馒头',
                four: '鲜奶+腰果树+菜园小饼',
                five: '鲜奶+手指饼干',
                six: '+',
                seven: '+'
            },
            {
                key: '2',
                time: '早点',
                one: '鲜奶+早餐饼干+菜园小饼2',
                two: '鲜奶+早餐饼干+菜园小饼',
                three: '鲜奶+早餐饼干+菜园小饼',
                four: '鲜奶+早餐饼干+菜园小饼',
                five: '鲜奶+早餐饼干+菜园小饼',
                six: '+',
                seven: '+'
            },
            {
                key: '3',
                time: '午餐',
                one: '鲜奶+早餐饼干+菜园小饼3',
                two: '鲜奶+早餐饼干+菜园小饼',
                three: '鲜奶+早餐饼干+菜园小饼',
                four: '鲜奶+早餐饼干+菜园小饼',
                five: '鲜奶+早餐饼干+菜园小饼',
                six: '+',
                seven: '+'
            },
            {
                key: '4',
                time: '午点',
                one: '鲜奶+早餐饼干+菜园小饼4',
                two: '鲜奶+早餐饼干+菜园小饼',
                three: '鲜奶+早餐饼干+菜园小饼',
                four: '鲜奶+早餐饼干+菜园小饼',
                five: '鲜奶+早餐饼干+菜园小饼',
                six: '+',
                seven: '+'
            },
            {
                key: '5',
                time: '晚餐',
                one: '鲜奶+早餐饼干+菜园小饼5',
                two: '鲜奶+早餐饼干+菜园小饼',
                three: '鲜奶+早餐饼干+菜园小饼',
                four: '鲜奶+早餐饼干+菜园小饼',
                five: '鲜奶+早餐饼干+菜园小饼',
                six: '+',
                seven: '+'
            },

        ];

        const { uploading, fileList } = this.state;
        const props = {
            onRemove: file => {
                this.setState(state => {
                    const index = state.fileList.indexOf(file);
                    const newFileList = state.fileList.slice();
                    newFileList.splice(index, 1);
                    return {
                        fileList: newFileList,
                    };
                });
            },
            beforeUpload: file => {
                this.setState(state => ({
                    fileList: [...state.fileList, file],
                }));
                return false;
            },
            fileList,
        };
        const recipe = [
            '红烧鸡腿、韭菜盒子、西红柿炒鸡蛋',
            '黑木耳、肉丝豆干炒莴笋、青菜香菇汤',
            '油爆虾、炒三丝、冬瓜笋干汤',
            '红烧鸭肉、肉丝都敢炒葫芦、紫菜虾皮汤',
            '排骨炖土豆、大白菜炒油豆腐、菠菜豆腐皮汤',
        ];
        const options = ['小班', '中班', '大班'];
        return (
            <div>
                <div className="headcss">
                    <Button type="primary" style={{ marginRight: 15 }} onClick={this.showDrawer1}>导入食谱</Button>
                    <Drawer
                        headerStyle={{ textAlign: 'center' }}
                        bodyStyle={{ textAlign: 'center' }}
                        height={200}
                        title="导入菜谱信息"
                        placement="left"
                        onClose={this.onClose1}
                        visible={this.state.visible1}
                        closable={true}
                    >
                        <Form layout="vertical" hideRequiredMark>
                            <div>
                                <div>
                                    请先选择需要导入的食谱：
                                </div>
                                <Upload {...props}>
                                    <Button type="primary" style={{ marginTop: 15 }}>选择文件</Button>
                                </Upload>
                                {/* <Button type="primary" style={{ marginTop: 15 }}>导入食谱</Button> */}
                                <Button
                                    type="primary"
                                    onClick={this.handleUpload}
                                    disabled={fileList.length === 0}
                                    loading={uploading}
                                    style={{ marginTop: 15 }}
                                >
                                    {uploading ? '正在导入' : '导入食谱'}
                                </Button>
                            </div>
                        </Form>
                    </Drawer>
                    <Button type="primary" onClick={this.showDrawer2}>导出食谱</Button>
                    <Drawer
                        headerStyle={{ textAlign: 'center' }}
                        bodyStyle={{ textAlign: 'center' }}
                        height={150}
                        title="导出菜谱信息"
                        placement="top"
                        onClose={this.onClose2}
                        visible={this.state.visible2}
                        closable={true}
                    >
                        <Form layout="vertical" hideRequiredMark>
                            {/* <Select
                                allowClear={true}
                                style={{ width: '10%', marginRight: 15 }}
                                placeholder="请选择班级">
                                <Option value="">小班</Option>
                                <Option value="">中班</Option>
                                <Option value="">大班</Option>
                            </Select> */}
                            <Select
                                mode="multiple"
                                allowClear
                                style={{ width: '15%', marginRight: 15 }}
                                placeholder="请选择班级"
                                defaultValue={['小班']}
                                onChange={this.handleChange}>
                                <Option value="1">小班</Option>
                                <Option value="2">中班</Option>
                                <Option value="3">大班</Option>
                            </Select>
                            <Select
                                allowClear={true}
                                style={{ width: '20%' }}
                                placeholder="请选择食谱">
                                <Option value="">第一周食谱</Option>
                                <Option value="">第二周食谱</Option>
                                <Option value="">第三周食谱</Option>
                            </Select>
                            {/* <Button type="primary" style={{ marginLeft: 15 }}>选择文件</Button> */}
                            {/* <Upload {...props}>
                                <Button type="primary" icon={<UploadOutlined />} style={{ marginLeft: 15 }}>选择文件</Button>
                            </Upload> */}
                            <Button type="primary" style={{ marginLeft: 15 }}>导出食谱</Button>
                        </Form>
                    </Drawer>
                    <div><Button type="primary" style={{ marginLeft: 15 }}>复制当前食谱到</Button></div>
                    <div><Button type="primary" style={{ marginLeft: 15 }}>删除当前食谱</Button></div>
                    <div><Button type="primary" style={{ marginLeft: 15 }}>设置食谱推送时间</Button></div>
                </div>
                <div className="conditioncss">
                    <a href="#" style={{ marginRight: 15 }}>上一周食谱</a>
                    <Select
                        allowClear={true}
                        style={{ width: '10%', marginRight: 15 }}
                        placeholder="请选择班级">
                        <Option value="">小班</Option>
                        <Option value="">中班</Option>
                        <Option value="">大班</Option>
                    </Select>
                    <Select
                        allowClear={true}
                        style={{ width: '20%' }}
                        placeholder="请选择食谱">
                        <Option value="">第一周食谱</Option>
                        <Option value="">第二周食谱</Option>
                        <Option value="">第三周食谱</Option>
                    </Select>
                    <Button type="primary" style={{ marginLeft: 15 }}>搜索</Button>
                    <a href="#" style={{ marginLeft: 15 }}>下一周食谱</a>
                </div>
                <div className="">
                  <Table 
                  columns={columns} 
                  dataSource={data} 
                  rowClassName={record => {
                    if(record.key == 1){
                        return 'table-color-dust';
                    }else if(record.key == 2){
                        return 'table-color-dust2';
                    }else if(record.key == 3){
                        return 'table-color-dust3';
                    }else if(record.key == 4){
                        return 'table-color-dust4';
                    }else{
                        return 'table-color-dust5';
                    }
                 }}
                  />
                </div>
                <Drawer
                    headerStyle={{ textAlign: 'center' }}
                    placement="right"
                    width={800}
                    title="编辑食谱"
                    onClose={this.onClose3}
                    visible={this.state.visible3}
                    closable={true}
                >
                    <Form layout="vertical" hideRequiredMark>
                        <div>
                            <div style={{ marginLeft: 10 }}>菜名：</div>
                            <div style={{ marginTop: 10, marginLeft: 10 }}>
                                <Input allowClear={true}
                                    placeholder="请选择菜名"
                                    value={this.state.recipes}
                                    onChange={this.setInputValue}
                                />
                            </div>
                            <div style={{ marginTop: 15 }}>
                                {recipe.map(recipe => (
                                    <Tooltip title={recipe} recipe={recipe} key={recipe}>
                                        <Button style={{ marginTop: 10, marginLeft: 10, background: '#E5F6FF' }} onClick={this.handleValue.bind(this, recipe)}>{recipe}</Button>
                                    </Tooltip>
                                ))}
                            </div>
                            <div style={{ marginTop: 10, marginLeft: 10 }}>配料：
                                <Button type="dashed" r>
                                    +添加配料
                                </Button>
                            </div>
                            <div style={{ marginTop: 10, marginLeft: 10, display: 'flex' }}>
                                <div className="ingredientscss1">
                                    <div style={{ textAlign: 'center', marginTop: '45%', marginLeft: '20%', display: 'flex' }}>
                                        点击上方'
                                    <div style={{ color: '#13BB86' }}>
                                            +添加配料
                                    </div>
                                    '来添加内容
                                 </div>
                                </div>
                                <div className="ingredientscss2">
                                    <div className="nutritioncss">
                                        <div>
                                            营养素含量
                                    </div>
                                        <div>
                                            能量(kcal)------------------------------0
                                    </div>
                                        <div>
                                            蛋白质(g)------------------------------0
                                    </div>
                                        <div>
                                            脂肪(g)------------------------------0
                                    </div>
                                        <div>
                                            碳水化合物(g)------------------------------0
                                    </div>
                                        <div>
                                            钙(mg)------------------------------0
                                    </div>
                                        <div>
                                            铁(mg)------------------------------0
                                    </div>
                                        <div>
                                            维D(mg)-------------------------------0
                                    </div>
                                        <div>
                                            维E(mg)------------------------------0
                                    </div>
                                    </div>
                                </div>
                            </div>
                            <div style={{ marginTop: 10, marginLeft: 10 }}>选择年级：</div>
                            <Checkbox.Group
                                options={options}
                                style={{ marginTop: 10, marginLeft: 10 }}
                                onChange={this.onChange}>
                            </Checkbox.Group>
                            <div 
                              style={{
                                marginTop: 10, 
                                marginLeft: 10, 
                                position: 'absolute',
                                left: 0,
                                bottom: 0,
                                width: '95%',
                                borderTop: '1px solid #e9e9e9',
                                padding: '10px 16px',
                                background: '#fff',
                                textAlign: 'right',
                            }}
                            >
                                <Button onClick={this.onClose3} style={{ marginRight: 8 }}>
                                    关闭
                                </Button>
                                <Button onClick={this.onClose3} type="primary">
                                    保存
                                </Button>
                            </div>
                        </div>
                    </Form>
                </Drawer>
            </div>
        );
    }
}


export { WeekRecipesComponent };
